<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
// 工作台页面配置
definePage({
  style: {
    navigationBarTitleText: '工作台',
  },
})

// 分类页面列表
const categories = [
  {
    title: '审批管理',
    items: [
      {
        id: 'todo',
        title: '待我审批',
        icon: 'i-solar:alarm-bold',
        color: '#9370DB',
        bgColor: 'rgba(147, 112, 219, 0.1)',
        url: '/pages/list/todo',
      },
      {
        id: 'approved',
        title: '我已审批',
        icon: 'i-solar:check-circle-bold',
        color: '#3CB371',
        bgColor: 'rgba(60, 179, 113, 0.1)',
        url: '/pages/list/approved',
      },
      {
        id: 'initiated',
        title: '我发起的',
        icon: 'i-solar:add-circle-bold',
        color: '#FFA500',
        bgColor: 'rgba(255, 165, 0, 0.1)',
        url: '/pages/list/initiated',
      },
      {
        id: 'cc',
        title: '抄送我的',
        icon: 'i-solar:bell-off-bold',
        color: '#6495ED',
        bgColor: 'rgba(100, 149, 237, 0.1)',
        url: '/pages/list/cc',
      },
    ],
  },
  {
    title: '设置',
    items: [
      {
        id: 'user-profile',
        title: '个人资料',
        icon: 'i-carbon-user-profile',
        color: '#4169E1',
        bgColor: 'rgba(65, 105, 225, 0.1)',
        url: '/pages-sub/settings/user-profile',
      },
      {
        id: 'change-password',
        title: '修改密码',
        icon: 'i-solar:lock-keyhole-minimalistic-broken',
        color: '#20B2AA',
        bgColor: 'rgba(32, 178, 170, 0.1)',
        url: '/pages-sub/settings/change-password',
      },
      {
        id: 'notification',
        title: '通知设置',
        icon: 'i-solar:bell-bing-broken',
        color: '#FFA500',
        bgColor: 'rgba(255, 165, 0, 0.1)',
        url: '/pages-sub/settings/notification',
      },
      {
        id: 'about',
        title: '关于我们',
        icon: 'i-solar:info-circle-broken',
        color: '#4682B4',
        bgColor: 'rgba(70, 130, 180, 0.1)',
        url: '/pages-sub/settings/about',
      },
      // {
      //   id: 'security',
      //   title: '安全设置',
      //   icon: 'shield-checkmark-bold',
      //   color: '#9370DB',
      //   bgColor: 'rgba(147, 112, 219, 0.1)',
      //   url: '/pages-sub/settings/security',
      // },
      // {
      //   id: 'bind-phone',
      //   title: '绑定手机',
      //   icon: 'phone-call-bold',
      //   color: '#3CB371',
      //   bgColor: 'rgba(60, 179, 113, 0.1)',
      //   url: '/pages-sub/settings/bind-phone',
      // },
      // {
      //   id: 'bind-email',
      //   title: '绑定邮箱',
      //   icon: 'mail-bold',
      //   color: '#6495ED',
      //   bgColor: 'rgba(100, 149, 237, 0.1)',
      //   url: '/pages-sub/settings/bind-email',
      // },
      // {
      //   id: 'login-history',
      //   title: '登录历史',
      //   icon: 'calendar-bold',
      //   color: '#FF6347',
      //   bgColor: 'rgba(255, 99, 71, 0.1)',
      //   url: '/pages-sub/settings/login-history',
      // },
      // {
      //   id: 'devices',
      //   title: '设备管理',
      //   icon: 'tablet-2-bold',
      //   color: '#8A2BE2',
      //   bgColor: 'rgba(138, 43, 226, 0.1)',
      //   url: '/pages-sub/settings/devices',
      // },

    ],
  },
  {
    title: '日志',
    items: [
      {
        id: 'console',
        title: '日志',
        icon: 'i-solar:dialog-2-outline',
        color: '#FFA500',
        bgColor: 'rgba(255, 165, 0, 0.1)',
        url: '/pages-sub/demo/console',
      },
    ],
  },
]

// 处理页面项点击
function handlePageClick(page) {
  console.log('点击页面:', page.title)
  // 导航到对应的页面
  uni.navigateTo({
    url: page.url,
    fail: (err) => {
      if (err.errMsg.includes('navigateTo:fail can not navigateTo a tabbar page')) {
        uni.switchTab({
          url: page.url,
        })
        return
      }
      console.error('页面跳转失败:', err)
      uni.showToast({
        title: '页面暂不可访问',
        icon: 'none',
        duration: 2000,
      })
    },
  })
}
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 分类页面列表 -->
    <view class="py-4 space-y-3">
      <template v-for="(category, index) in categories" :key="index">
        <view v-if="(category.title === '日志' || userInfo?.userInfo?.realname === '安绍龙') || category.title !== '日志'" :key="index" class="bg-white p-4">
          <!-- 分类标题 -->
          <view class="mb-3">
            <text class="text-sm text-gray-700 font-medium">{{ category.title }}</text>
          </view>

          <!-- 功能按钮网格 -->
          <view class="grid grid-cols-4 gap-4">
            <view
              v-for="item in category.items"
              :key="item.id"
              class="menu-item flex flex-col items-center"
              @click="handlePageClick(item)"
            >
              <view
                class="mb-2 h-12 w-12 flex items-center justify-center rounded-lg"
                :style="{ backgroundColor: item.bgColor }"
              >
                <view :class="`${item.icon} text-2xl`" :style="{ color: item.color }" />
              </view>
              <text class="text-center text-xs text-gray-700">{{ item.title }}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.space-y-6 {
  margin-top: 0;
  margin-bottom: 0;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

// 快捷操作按钮样式
.menu-item {
  transition: all 0.2s ease;
}

.menu-item:active {
  opacity: 0.9;
  transform: scale(0.95);
}

.menu-item view {
  transition: all 0.2s ease;
}

.menu-item:active view {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
